<template>
  <Row :gutter="10">
    <i-col span="12">
      <Card>
        <div class="update-paste-con">
          <paste-editor
            v-model="pasteDataArr"
            @on-success="handleSuccess"
            @on-error="handleError"
          />
        </div>
        <div class="update-paste-btn-con">
          <span class="paste-tip">使用Tab键换列，使用回车键换行</span>
          <Button type="primary" style="float: right" @click="handleShow"
            >显示表格数据</Button
          >
        </div>
      </Card>
    </i-col>
    <i-col span="12">
      <Card>
        <Table :height="400" :columns="columns" :data="tableData" />
      </Card>
    </i-col>
  </Row>
</template>

<script>
import PasteEditor from "_c/paste-editor";
import { getTableDataFromArray } from "@/libs/utils";
export default {
  name: "update_paste_page",
  components: {
    PasteEditor,
  },
  data() {
    return {
      pasteDataArr: [],
      columns: [],
      tableData: [],
      validated: true,
      errorIndex: 0,
    };
  },
  methods: {
    handleSuccess() {
      this.validated = true;
    },
    handleError(index) {
      this.validated = false;
      this.errorIndex = index;
    },
    handleShow() {
      if (!this.validated) {
        this.$Notice.error({
          title: "您的内容不规范",
          desc: `您的第${this.errorIndex + 1}行数据不规范，请修改`,
        });
      } else {
        let { columns, tableData } = getTableDataFromArray(this.pasteDataArr);
        this.columns = columns;
        this.tableData = tableData;
      }
    },
  },
};
</script>

<style lang="less">
.update-paste {
  &-con {
    height: 350px;
  }
  &-btn-con {
    box-sizing: content-box;
    height: 30px;
    padding: 15px 0 5px;
  }
}
.paste-tip {
  color: #19be6b;
}
</style>